<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
   
    
       .box {
        display: flex;
        /* margin: 5%; */
        justify-content: space-around;


       }
       /* .box2{
        justify-content:space-around;
       } */

       .one {
        display: flex;
      
    }

    .two {
        display: flex;
    }

    .item {
        width: 400px;
    }
.p1{
        font-size: 50px;
        text-align: center;
        padding-bottom: 5%;
}
    p{
        font-size: 20px;
        font-weight: 800;
        font-family: "微软雅黑";
        padding-bottom:30px ;
        padding-top:20px ;
    }
    span {
        font-size: 6px;
        color:darkgray;
        display: block;
        align-items: center;
        padding-bottom: 20px;
    }

</style>
</head>


<body>

    <div class="box">
        <div class="box2">
        <p class="p1">今日推荐</p>
        <div class="one">
            <div class="item">
                <a href=""><img src="" alt=""></a>
                
                <img src="./IMG/01.jpg" alt="demo01"width="225" height="325">
                <p>前任3:再见前任 </br>
                    <span>
                        前任3:再见前任 </br>
                    </span>
                </p>
            </div>
            <div class="item">
                <img src="./IMG/09.jpg" alt="demo06"width="225" height="325">
                <p>三体 </br>
                    <span>
                        宇宙闪烁
                    </span>
                </p>
            </div>
            <div class="item">
                <img src="./IMG/10.jpg" alt="demo06"width="225" height="325">
                <p>大话西游之大圣娶妻
                    <span>
                        加强概念版
                    </span>
                </p>
            </div>
            <div class="item">
                <img src="./IMG/02.jpg" alt="demo02"width="225" height="325">
                <p>碧蓝航线
                    <span>
                        二次元海战
                    </span>
                </p>
            </div>

            <div class="item">
                <img src="./IMG/03.jpg" alt="demo03"width="225" height="325">
                <p>如火
                    <span>
                       穿越火线电视剧
                    </span>
                </p>
            </div>
        </div>

        <div class="two">
            <div class="item">
                <img src="./IMG/04.jpg" alt="demo04"width="225" height="325">
                <p>美人鱼
                    <span>
                        周星驰的美人鱼
                    </span>
                </p>
            </div>

            <div class="item">
                <img src="./IMG/05.jpg" alt="demo05"width="225" height="325">
                <p>2012
                    <span>
                        玛雅预言危机
                    </span>
                </p>
            </div>

            <div class="item">
                <img src="./IMG/06.jpg" alt="demo06"width="225" height="325">
                <p>后天
                    <span>
                        全球气候变冷
                    </span>
                </p>
            </div>
            <div class="item">
                <img src="./IMG/07.jpg" alt="demo06"width="225" height="325">
                <p>变形金刚5最后的骑士
                    <span>
                        变形金刚系列
                    </span>
                </p>
            </div>
            <div class="item">
                <img src="./IMG/08.jpg" alt="demo06"width="225" height="325">
                <p>英雄联盟:双城之战
                    <span>
                        英雄联盟动画片
                    </span>
                </p>
            </div>
          
          

        </div>
    </div>
</body>

</html>